import React, { useState } from 'react';
import {
  Card,
  Descriptions,
  Table,
  Row,
  Col,
  ConfigProvider,
  Collapse,
} from 'antd';
import styles from './index.less';
import type { ColumnsType } from 'antd/es/table/interface';
import { useMount } from 'ahooks';
import { getScoreDetail } from '@/services/StudentAnalysisCounsellor';

const { Panel } = Collapse;
interface DataType {
  key: string;
  id: string;
  courseName: string;
  creditEarn: number;
  hour: number;
  score: number;
  property: string;
  remark: string;
  examDate: string;
}

const ReportCard: React.FC<any> = () => {
  const [stuName, setStuName] = useState<string>('');
  const [undergraduateMentorName, setUndergraduateMentorName] =
    useState<string>('');
  const [gender, setGender] = useState<string>('');
  const [enrollmentYear, setEnrollmentYear] = useState<string>('');
  const [stuNumber, setStuNumber] = useState<string>('');
  const [academicYears, setAcademicYears] = useState<number>(0);
  const [creditSum, setCreditSum] = useState<string>('');
  const [creditEarn, setCreditEarn] = useState<string>('');
  const [courseScoreSemesterList11, setCourseScoreSemesterList11] = useState<
    DataType[]
  >([]);
  const [courseScoreSemesterList12, setCourseScoreSemesterList12] = useState<
    DataType[]
  >([]);
  const [courseScoreSemesterList21, setCourseScoreSemesterList21] = useState<
    DataType[]
  >([]);
  const [courseScoreSemesterList22, setCourseScoreSemesterList22] = useState<
    DataType[]
  >([]);
  const [courseScoreSemesterList31, setCourseScoreSemesterList31] = useState<
    DataType[]
  >([]);
  const [courseScoreSemesterList32, setCourseScoreSemesterList32] = useState<
    DataType[]
  >([]);
  const [courseScoreSemesterList41, setCourseScoreSemesterList41] = useState<
    DataType[]
  >([]);
  const [courseScoreSemesterList42, setCourseScoreSemesterList42] = useState<
    DataType[]
  >([]);

  // 在获取数据后，添加序号字段
  const addSerialNumber = (data: DataType[]) => {
    return data.map((item, index) => {
      return {
        ...item,
        id: index + 1,
      };
    });
  };

  const getScoreDetails = async () => {
    try {
      let token: any = localStorage.getItem('token');
      const res = await getScoreDetail(token, '190037');
      if (res?.data?.data) {
        // Fetch the data
        const {
          stuName,
          gender,
          enrollmentYear,
          stuNumber,
          academicYears,
          creditSum,
          creditEarn,
          undergraduateMentorName,
          courseScoreSemesterList11,
          courseScoreSemesterList12,
          courseScoreSemesterList21,
          courseScoreSemesterList22,
          courseScoreSemesterList31,
          courseScoreSemesterList32,
          courseScoreSemesterList41,
          courseScoreSemesterList42,
        } = res.data.data;

        // Add serial numbers
        setStuName(stuName);
        setGender(gender);
        setEnrollmentYear(enrollmentYear);
        setStuNumber(stuNumber);
        setAcademicYears(academicYears);
        setCreditSum(creditSum);
        setCreditEarn(creditEarn);
        setUndergraduateMentorName(undergraduateMentorName);
        setCourseScoreSemesterList11(
          addSerialNumber(courseScoreSemesterList11),
        );
        setCourseScoreSemesterList12(
          addSerialNumber(courseScoreSemesterList12),
        );
        setCourseScoreSemesterList21(
          addSerialNumber(courseScoreSemesterList21),
        );
        setCourseScoreSemesterList22(
          addSerialNumber(courseScoreSemesterList22),
        );
        setCourseScoreSemesterList31(
          addSerialNumber(courseScoreSemesterList31),
        );
        setCourseScoreSemesterList32(
          addSerialNumber(courseScoreSemesterList32),
        );
        setCourseScoreSemesterList41(
          addSerialNumber(courseScoreSemesterList41),
        );
        setCourseScoreSemesterList42(
          addSerialNumber(courseScoreSemesterList42),
        );
      } else {
        // Handle data not found
      }
    } catch (error) {
      // Handle request error
    }
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '课程名',
      dataIndex: 'courseName',
      key: 'courseName',
    },
    {
      title: '学分',
      dataIndex: 'creditEarn',
      key: 'creditEarn',
    },
    {
      title: '学时',
      dataIndex: 'hour',
      key: 'hour',
    },
    {
      title: '成绩',
      dataIndex: 'score',
      key: 'score',
    },
    {
      title: '属性',
      dataIndex: 'property',
      key: 'property',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    },
  ];

  useMount(() => {
    getScoreDetails();
  });

  return (
    <div>
      {/* 课程成绩单 */}
      <Card
        title={
          <span style={{ fontWeight: 'bold', fontSize: 18 }}>课程成绩单</span>
        }
      >
        <Descriptions bordered column={3}>
          <Descriptions.Item label="学号">{stuNumber}</Descriptions.Item>
          <Descriptions.Item label="姓名">{stuName}</Descriptions.Item>
          <Descriptions.Item label="性别" span={1}>
            {gender}
          </Descriptions.Item>
          <Descriptions.Item label="入学年月">
            {enrollmentYear}
          </Descriptions.Item>
          <Descriptions.Item label="学制">{academicYears}</Descriptions.Item>
          <Descriptions.Item label="班导师" span={1}>
            {undergraduateMentorName}
          </Descriptions.Item>
        </Descriptions>
      </Card>
      {/* 学期课程详情 */}
      <Card
        title={
          <span style={{ fontWeight: 'bold', fontSize: 18 }}>学期课程详情</span>
        }
      >
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel header={'第1学年第1学期'}>
                <ConfigProvider>
                  <Table
                    columns={columns}
                    dataSource={courseScoreSemesterList11}
                    pagination={{ hideOnSinglePage: true }}
                  />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel header={'第1学年第2学期'}>
                <ConfigProvider>
                  <Table
                    columns={columns}
                    dataSource={courseScoreSemesterList12}
                    pagination={{ hideOnSinglePage: true }}
                  />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel header={'第2学年第1学期'}>
                <ConfigProvider>
                  <Table
                    columns={columns}
                    dataSource={courseScoreSemesterList21}
                    pagination={{ hideOnSinglePage: true }}
                  />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel header={'第2学年第2学期'}>
                <ConfigProvider>
                  <Table
                    columns={columns}
                    dataSource={courseScoreSemesterList22}
                    pagination={{ hideOnSinglePage: true }}
                  />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
        </Row>

        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel header={'第3学年第1学期'}>
                <ConfigProvider>
                  <Table
                    columns={columns}
                    dataSource={courseScoreSemesterList31}
                    pagination={{ hideOnSinglePage: true }}
                  />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel header={'第3学年第2学期'}>
                <ConfigProvider>
                  <Table
                    columns={columns}
                    dataSource={courseScoreSemesterList32}
                    pagination={{ hideOnSinglePage: true }}
                  />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={12}>
            <Collapse>
              <Panel header={'第4学年第1学期'}>
                <ConfigProvider>
                  <Table
                    columns={columns}
                    dataSource={courseScoreSemesterList41}
                    pagination={{ hideOnSinglePage: true }}
                  />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
          <Col span={12}>
            <Collapse>
              <Panel header={'第4学年第2学期'}>
                <ConfigProvider>
                  <Table
                    columns={columns}
                    dataSource={courseScoreSemesterList42}
                    pagination={{ hideOnSinglePage: true }}
                  />
                </ConfigProvider>
              </Panel>
            </Collapse>
          </Col>
        </Row>
      </Card>
      {/* 总学分统计 */}
      <Card style={{ marginBottom: 30 }}>
        <Descriptions column={2}>
          <Descriptions.Item
            label={
              <span style={{ fontWeight: 'bold', fontSize: 14 }}>总学分</span>
            }
          >
            {creditSum}
          </Descriptions.Item>
          <Descriptions.Item
            label={
              <span style={{ fontWeight: 'bold', fontSize: 14 }}>已修学分</span>
            }
          >
            {creditEarn}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  );
};
export default ReportCard;
